<template>
	<cu-page-base :nav-bar-options="navBarOptions" @clickNavBarLeft="goBack">
		<view class="cu-w-100 cu-p-20">
			<view class="cu-w-100">
				<u-subsection :list="list" fontSize="28" mode="button" @change="sectionChange"
					:current="curNow"></u-subsection>
			</view>
			<view v-if="curNow === 0" class="cu-w-100">
				<block v-if="recordStore.compoundList.length === 0">
					<view class="cu-w-100 cu-pt-20 cu-shadow cu-border-r-20">
						<cu-empty icon="data" text="暂无数据"></cu-empty>
					</view>
				</block>
				<block v-else>
					<view class="cu-w-100 cu-p-20">
						<view class="cu-w-100 cu-p-20 cu-bg-main cu-shadow cu-border-r-20">
							<block v-for="(item,idx) in recordStore.compoundList">
								<cu-record :key="idx" :type="item.type" :ids="idx" :text="item.text" :state="item.state" 
								 :createDate="item.create_date" :expireDate="item.expire_date" :useWords="item.use_words" 
								 @download="download"></cu-record>
							</block>
							<view class="cu-w-100 cu-py-10">
								<u-divider text-size="28" lineColor="#2f2f30" :text="recordStore.compoundListHasNext ? '加载更多' : '没有更多了'"
									:dashed="true"></u-divider>
							</view>
						</view>
					</view>
				
				</block>
			</view>
			<view v-if="curNow === 1" class="cu-w-100">
				<block v-if="recordStore.auditionList.length === 0">
					<view class="cu-w-100 cu-pt-20 cu-shadow cu-border-r-20">
						<cu-empty icon="data" text="暂无数据"></cu-empty>
					</view>
				</block>
				<block v-else>
					<view class="cu-w-100 cu-p-20">
						<view class="cu-w-100 cu-p-20 cu-bg-main cu-shadow cu-border-r-20">
							<block v-for="(item,idx) in recordStore.auditionList">
								<cu-record :key="idx" :type="item.type" :ids="idx" :text="item.text" :state="item.state" 
								 :createDate="item.create_date" :expireDate="item.expire_date" :useWords="item.use_words" 
								 @download="download"></cu-record>
							</block>
							<view class="cu-w-100 cu-py-10">
								<u-divider text-size="28" lineColor="#2f2f30" :text="recordStore.auditionListHasNext ? '加载更多' : '没有更多了'"
									:dashed="true"></u-divider>
							</view>
						</view>
					</view>
				
				</block>
			</view>
		</view>
	</cu-page-base>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import commMiXin from '@/common/mixin/common-mixin.js';
	export default {
		mixins: [commMiXin],
		computed: {
			...mapState({
				commonStore: state => state.commonStore,
				loginStore: state => state.loginStore,
				recordStore: state => state.recordStore,
			})
		},
		data() {
			return {
				navBarOptions: {
					title: "操作记录",
					leftText: "返回",
					leftIcon: "back",
				},
				list: ['语音合成', '试听记录'],
				curNow: 0,
				pageNum:4,
				enqrMark:true,
			};
		},
		async onLoad() {
			await this.$store.dispatch('recordStore/clear');
			await this.getCompound()
		},
		methods: {
			async sectionChange(index) {
				this.curNow = index
				if(this.enqrMark){
					this.enqrMark = !this.enqrMark
					await this.getAudition();
				}
			},
			download(idx){
				this.gotoPage("/pages/voice/record/detail?idx=" + idx,"navigate")
			},
			async getCompound(){
				await this.$store.dispatch('recordStore/getCompound', {
					uid:this.loginStore.userinfo._id,
					startNum:this.recordStore.compoundList.length,
					pageNum: this.pageNum
				});
			},
			async getAudition(){
				await this.$store.dispatch('recordStore/getAudition', {
					uid:this.loginStore.userinfo._id,
					startNum:this.recordStore.auditionList.length,
					pageNum: this.pageNum
				});
			},
			// 触底的事件
			onReachBottom() {
				if(this.curNow == 0 && this.recordStore.compoundListHasNext){
					this.getCompound()
				}
				else if(this.curNow == 1 && this.recordStore.auditionListHasNext){
					this.getAudition()
				}
			},
			goBack(data) {
				this.gotoPage(1, 'navigateBack');
			},
		}
	}
</script>

<style lang="scss">

</style>